<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>回头鱼首页</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(function (){
      //获取li的长度
      let len=$('.oLi').length;
      //把所有li的宽度算好,赋值给ul当宽度
      $('#banner').width($('.oLi').eq(0).width()*len)
      //id是为了后面的计时器暂停设置的
      let id;
      //index用来统计滚动次数
      let index=0;
      //启动计时器
      id=setInterval(start,3000)
      //给ul(#banner)添加hover选择器事件
      $('#banner').hover(function(){
        //鼠标进入的时候暂停
        clearInterval(id)
      },function(){
        //鼠标离开的时候开始
        id=setInterval(start,3000)
      })
      function start(){
        //执行的时候次数++
        index++
        //用animate设置ul的left属性,与左边的距离
        $('#banner').animate({'left':-$('.oLi').eq(0).width()*(index%len)})
        //实现无缝轮播的关键地方
        //判断index%len的值index%len=0的时候表示第一张,那么len-1表示最后一张,
        //最后一张与第一张一模一样,所有直接修改left属性
        if(index%len==(len-1)){

          //同时给index+1跳过第一张图的再次加载

          $('#banner').animate({'left':0},0)
          index++
        }
      }

      //分页查询封装一个方法
      dianji();
    })
    function Jump(users,comment_id){
        location.href="${pageContext.request.contextPath}/detailsListServlet?id="+users+"&comment_id="+comment_id;
    }

    function dianji(currentPage){
      $.get("${pageContext.request.contextPath}/routeServlet",{currentPage:currentPage},function (date){
        //共几页，多少条
        $('#gong').html(date.totalPage);
        $('#duoshao').html(date.totalCount);
        //页码展示
        var lis="";
        var beforeNem=date.currentPage-1;
        if (beforeNem<=0){
          beforeNem=1
        }
        var firstPage='<li class="page-item" style="cursor: pointer" onclick="javascipt:dianji('+beforeNem+')"><a class="page-link" href="javascipt:dianji('+beforeNem+')" aria-label="Previous"> <span aria-hidden="true">&laquo;</span></a></li>'
        lis+=firstPage
        //定义开始位置，结束位置
        var being;
        var end;
        if (date.totalPage<10){
          //总页数不够10
          being=1
          end=date.totalPage
        }else {
          //总页数超过10
          being=date.currentPage-5
          end=date.currentPage+4
          //如果前面不够5个，后面要补齐10个
          if (being<1){
            being=1
            end=being+9
          }
          if (end>date.totalPage){
            end=date.totalPage
            being=end-9
          }
        }

        for (let i = being; i <= end; i++) {
          if (date.currentPage==i){
            lis+="<li class='page-item active' id='keshiya'  style='cursor: pointer' onclick='javascipt:dianji("+i+")'><a class='page-link' >"+i+"</a></li>"
          }else {
            lis+="<li class='page-item' id='keshiya' style='cursor: pointer' onclick='dianji("+i+")'><a class='page-link' >"+i+"</a></li>"
          }
        }
        var fnallforeNem=date.currentPage+1;

        if (fnallforeNem>=date.totalPage){
          fnallforeNem=date.totalPage
        }
        var lastPage='<li class="page-item" style="cursor: pointer" onclick="javascipt:dianji('+fnallforeNem+')"> <a class="page-link" href="javascipt:dianji('+fnallforeNem+')" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li>'
        lis+=lastPage

        $('#zongyeshu').html(lis)



        //List数组展示

        var route_list="";

        for (let i = 0; i < date.list.length; i++) {
          var route= date.list[i]
          var li='<li onclick="Jump('+route.shopId+','+route.comment_id+')"><img class="home-img" style="width: 250px;height: 250px" src="'+route.home+'" alt=""> <div class="home-yang">'+route.name+'</div><div class="home-huobajia"><ol><li>￥'+route.price+'</li></ol></div></li>'
          route_list+=li
        }
        $("#zongye").html(route_list)
        window.scrollTo(300,300)
      })
    }

  </script>
</head>
<body>
<div class="max">
  <div class="tu">
    <img src="img/index_top.jpg" alt="">
  </div>
  <%@include file="head.jsp"%>
  <div class="lunbo">
    <ul  id="banner">
      <li class="oLi"><img src="img/lunbo.jpg" alt=""></li>
      <li class="oLi"><img src="img/lunbo2.jpg" alt=""></li>
      <li class="oLi"><img src="img/lunbo3.jpg" alt=""></li>
      <li class="oLi"><img src="img/lunbo.jpg" alt=""></li>
    </ul>
  </div>

  <!-- 限时秒杀标题 -->
  <div class="home-Waterfall">

  </div>


  <!-- 火爆热销 -->
  <div class="home-rexiao">
    <ul>
      <li>火爆热销</li>
      <li>我们可是回头鱼销量排名前20的白富美哦！</li>
    </ul>
  </div>

  <!-- 火爆热销商品 -->

  <div class="home-shagp">
    <ul id="zongye">

    </ul>
    <div style="width: 100%;height: 80px;">
      <div style="width: 200px;height: 100%;float: left;margin-left: 320px;line-height: 80px;text-align: center;font-weight: bold;font-size: 20px;">共有<span id="gong" style="color: red"> ${sessionScope.pd.totalPage} </span>页<span style="color: red" id="duoshao"> ${sessionScope.pd.totalCount} </span>条商品</div>
    </div>
    <nav style="margin-top: 20px" aria-label="Page navigation example">
      <ul id="zongyeshu" data-lenz="${sessionScope.pd.totalPage}" style="margin-left: 1400px;" class="pagination">

      </ul>
    </nav>

  </div>


  <div class="home-weibu">
    <div class="home-weibu1">
      <div class="home-weibu7"></div>
      <ul>
        <li><img src="img/尾部1.png" alt=""></li>
        <li>
          <div class="zitiyang">自营正品</div>
          <div class="kaixiang">正品保障 假一赔三</div>
        </li>
        <li>
          <img src="img/尾部2.png" alt="">

        </li>
        <li>
          <div class="zitiyang">自营正品</div>
          <div class="kaixiang">不限品类 满88免邮</div>
        </li>
        <li><img src="img/尾部3.png" alt=""></li>
        <li>
          <div class="zitiyang">闪电发货</div>
          <div class="kaixiang">极速发货 航空直达</div>
        </li>
        <li>
          <img src="img/尾部4.png" alt="">
        </li>
        <li>
          <div class="zitiyang">售后保障</div>
          <div class="kaixiang">开箱验货 30天退换</div>
        </li>
      </ul>
    </div>

    <div class="home-weibu2">
      <ul>
        <li>
          <div class="home-haoma">400-6699-840</div>
          <div>
            <ol>
              <li>周一到周日</li>
              <li>09.00-22.00</li>
            </ol>
          </div>
          <div>
            <ol>
              <li>关注我们</li>
              <li><img src="img/尾部5.png"></li>
              <li><img src="img/尾部6.png"></li>
              <li><img src="img/尾部7.png"></li>
            </ol></div>
        </li>
        <li>
          <div class="home-xiangtong">
            <div>正品保障</div>
            <div>30天无忧退换</div>
            <div>消费者告知书</div>
            <div>真假辨别</div>
            <div>假货报道</div>
            <div>正品保障</div>
          </div>
        </li>
        <li>
          <div class="home-xiangtong">
            <div>新手指南</div>
            <div>购物流程</div>
            <div>会员级别</div>
            <div>支付方式</div>
            <div>回头币</div>
            <div>评价晒单</div>
          </div>
        </li>
        <li>
          <div class="home-xiangtong">
            <div>配送方式</div>
            <div>物流查询</div>
            <div>配送说明</div>
            <div>防骗警示</div>
            <div>配送时效</div>
            <div>验货签收</div>
          </div>
        </li>
        <li>
          <div class="home-xiangtong">
            <div>售后服务</div>
            <div>退货运费</div>
            <div>退货流程</div>
            <div>退货政策</div>
            <div>投诉建议</div>
            <div>联系客服</div>
          </div>
        </li>
        <li>
          <div class="home-xiangtong">
            <div>常见问题</div>
            <div>账户问题</div>
            <div>售后问题</div>
            <div>配送问题</div>
            <div>支付问题</div>
            <div>常见问题</div>
          </div>
        </li>
        <li>
          <div class="home-erwei">
            <img src="img/二维码.jpg" alt="">
            <div>微信公众号</div>
          </div>
        </li>
        <li>
          <div class="home-erwei">
            <img src="img/二维码.jpg" alt="">
            <div>客服微信号</div>
          </div>
        </li>
      </ul>
    </div>

  </div>


  <!-- 尾部 -->
  <div class="yang">
    <div class="yang-shi"></div>
    <ul>
      <li>网站简介</li>
      <li>联系我们</li>
      <li>招商合作</li>
      <li>用户协议</li>
      <li>隐私政策</li>
      <li>投诉建议</li>
    </ul>

    <p>Copyright 2012 - 2021 www.huitouyu.com. All rights reserved. 回头鱼商城版权所有</p>

    <div class="pao">
      <div class="pei"><img src="img/yin.png" alt=""></div>
      <div class="pei11"><img src="img/zhi.png" alt=""></div>
      <div class="pei11"><img src="img/wang.png" alt=""></div>
      <div class="pei11"><img src="img/zhong.png" alt=""></div>
      <div class="pei11"><img src="img/360.png" alt=""></div>
    </div>
  </div>


</div>
</body>
</html>